<template>
  <div id="chart_1" style="width: 100%; height: 1080px"></div>
</template>
<script>
import {config} from "@/pages/xzchart/Chart_1/config";
import {data} from "@/pages/xzchart/Chart_1/data";

export default {
  data() {
    return {
      reportInstance : null,
      response_data : [
        {
          "商品名称": "笔记本电脑",
          "区域名称": "北京",
          "销售额": 1500,
        },
        {
          "商品名称": "笔记本电脑",
          "区域名称": "上海",
          "销售额": 1600,
        },
        {
          "商品名称": "笔记本电脑",
          "区域名称": "深圳",
          "销售额": 1700,
        },
        {
          "商品名称": "台式电脑",
          "区域名称": "北京",
          "销售额": 900,
        },
        {
          "商品名称": "台式电脑",
          "区域名称": "上海",
          "销售额": 1200,
        },
        {
          "商品名称": "台式电脑",
          "区域名称": "深圳",
          "销售额": 1400,
        },
      ],
      options: {reportConfig: config, reportData: [], paramsConfig: []}
    }
  },
  mounted() {
    this.options.onUpdateData = this.onUpdateData
    this.reportInstance = new XZDashboard("#chart_1", this.options);
    this.reportInstance.updateData(data);
  },
  methods: {
    onUpdateData(datasets, params) {
      console.log(datasets, params)
      return new Promise((resolve, reject) => {
        if (this.data.length > 0) {
          resolve(this.data);
        } else {
          reject([])
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
